<template>
  <div>
    <div class="modal-body">
      <div v-if="buttonType == 'add'" class="row form-inline" style="padding-top: 0">
        <label class="control-label" for="titleRecommend">&nbsp;&nbsp;资源位：</label>
        <div class="radio list-group">
          <label class="radio"> 标题位
            <input type="radio"
                   value="TITLE"
                   v-model="relPosition"
                   name="resourceType"
                   class="resourceType"
                   checked="checked"> &nbsp; &nbsp; &nbsp;&nbsp;
            &nbsp; </label>
          <label class="radio"> 图片位
            <input type="radio"
                   value="IMAGE"
                   name="resourceType"
                   class="resourceType"
                   v-model="relPosition">&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
          </label>
          <label class="radio"> 商品位
            <input type="radio"
                   value="GOODS"
                   name="resourceType"
                   class="resourceType"
                   v-model="relPosition">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
          </label>
        </div>
      </div>
      <div v-if="buttonType == 'updata'">
        <label class="control-label" for="titleRecommend">&nbsp;&nbsp;资源位：</label>{{relPositionName}}
      </div>
      <br>

      <!--资源位类型-->
      <div class="row form-inline">
        <label class="control-label" for="positionSelect">&nbsp;资源类型：</label>

        <select id="positionSelect" name="positionSelect" style="width: 90px" v-model="goodsClassifyCode">

          <option v-for="(item ,index) in classifyList" :key="index" :value="item.goodsclasscode">
            {{item.goodsclassname}}
          </option>

        </select>
      </div>

      <!-- 标题位-->
      <div v-if=" relPosition == 'TITLE'" id="newTitle" class="form-inline show">
        <div class="row form-inline">
          <label class="control-label" for="mainTitle">主标题<span class="required">*</span>：</label>
          <input type="text" id="mainTitle" name="mainTitle" class="form-control" v-model="relTitle">
        </div>
        <div class="row form-inline">
          <label class="control-label" for="subTitle">副标题<span class="required">*</span>：</label>
          <input type="text" id="subTitle" name="subTitle" class="form-control" v-model="relSubtitle">
        </div>
      </div>

      <!-- 图片位-->
      <div v-else-if="relPosition == 'IMAGE' " id="newImage" class="form-inline hidden">
        <div class="row form-inline">
          <label class="control-label" for="imageTitle">资源标题<span class="required">*</span>：</label>
          <input type="text" id="imageTitle" name="imageTitle" class="form-control" v-model="relTitle">
        </div>
        <!--基本图片上传-->
        <div class="cjy-row" id="imageActive" style="">
          <label class="control-label" for="imageGoodsImage" style="vertical-align: top;
    margin-top: 70px;">图片上传<span
            class="required">*</span>：</label>
          <div class="form-group">
            <img-upload
              ref="bannerImg"
              :deleteCallback="bannerDeleteCallback"
              :imgShowList="publicityPicture? [publicityPicture] : []"
            >
            </img-upload>
          </div>
          <input type="hidden" name="imageActiveImage" class="form-control" v-model="goodsCode">
        </div>
        <!--推广商品与活动选择-->
        <div class="row">
          <label class="control-label">&nbsp;推广类型：</label>
          <label class="custom-control custom-radio">

            <label class="custom-control custom-radio">
              <input id="imageGoodsRadio"
                     name="imagePromotionType"
                     type="radio" value="1"
                     class="custom-control-input"
                     v-model="promotionType">
              <span class="custom-control-indicator">商品</span>
            </label>

            <label class="custom-control custom-radio">
              <input id="imageActiveRadio"
                     name="imagePromotionType"
                     type="radio"
                     value="2"
                     class="custom-control-input"
                     v-model="promotionType">
              <span class="custom-control-indicator">活动</span>
            </label>
          </label>
        </div>

        <!--活动商品编码上传-->
        <div v-if="promotionType == 1" class="row form-inline show" id="imageGoods">
          <label class="control-label" for="imageGoodsCode">商品编码<span
            class="required">*</span>：</label>


              <input type="text" id="imageGoodsCode" readonly name="imageGoodsCode" class="form-control" v-model="goodsCode" @click="searchproductmodel"/>


          <!--<search-encode ref="searchModel" @getgoodscodedata="getgoodscode">
          </search-encode>-->
        </div>



        <!--活动图片上传-->
        <div v-else-if="promotionType == 2" class="cjy-row" style="">
          <label class="control-label" for="imageActiveImage" style="vertical-align: top;
    margin-top: 70px;">图片上传<span
            class="required">*</span>：</label>
          <div class="form-group">
            <img-upload
              ref="activityImg"
              :deleteCallback="bannerDeleteCallback"
              :imgShowList="activePicture ? [activePicture] : []"
            >
            </img-upload>
          </div>
          <input type="hidden" name="imageActiveImage" class="form-control">
        </div>
      </div>

      <!-- 商品位-->
      <div v-else-if="relPosition == 'GOODS'" id="newGoods" class="form-inline hidden">
        <div class="row form-inline">
          <label class="control-label" for="imageTitle">资源标题<span class="required">*</span>：</label>
          <input type="text" id="goodsTitle" name="imageTitle" class="form-control" v-model="relTitle">
        </div>
        <div class="row">
          <label class="control-label">&nbsp;推广类型：</label>
          <label class="custom-control custom-radio">
            <label class="custom-control custom-radio">
              <input id="goodsRadio" name="goodsPromotionType" value="1" type="radio" checked="checked"
                     class="custom-control-input" v-model="promotionType">
              <span class="custom-control-indicator">商品</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="activeRadio" name="goodsPromotionType" value="2" type="radio" disabled=""
                     class="custom-control-input" v-model="promotionType">
              <span class="custom-control-indicator">活动</span>
            </label>
          </label>
        </div>
        <div class="row form-inline">
          <label class="control-label" for="goodsCode">商品编码<span class="required">*</span>：</label>
          <input @click="searchproductmodel"  readonly type="text" id="goodsCode" name="goodsCode" class="form-control" v-model="goodsCode">
          <!--<search-encode ref="searchModel" @getgoodscodedata="getgoodscode">
          </search-encode>-->
        </div>

        <!--基本图片上传-->
        <div class="cjy-row" id="imageActive" style="">
          <label class="control-label" for="imageGoodsImage" style="vertical-align: top;
    margin-top: 70px;">图片上传<span
            class="required">*</span>：</label>
          <div class="form-group">
            <img-upload
              ref="bannerImg"
              :deleteCallback="bannerDeleteCallback"
              :imgShowList="publicityPicture? [publicityPicture] : []"
            >
            </img-upload>
          </div>
          <input type="hidden" name="imageActiveImage" class="form-control" v-model="goodsCode">
        </div>

      </div>
    </div>
    <div class="modal-footer">
      <button type="button" id="insertReTT" class="btn btn-primary" @click="addCommend">立即发布</button>
      <button type="button" @click="closeEdit" class="btn btn-secondary" data-dismiss="modal">取消</button>
    </div>
    <toast ref="Toast">
    </toast>
  </div>
</template>

<script>
  // import Hello from './components/Hello'
  import imgUpload from '@/real-components/ImgUpload2'
  /*import SearchEncode from "@/edit-components/SearchEncode";*/

  import API from '@/api/cjy-edit-api'
  import {queryCommendList, addCommendList, updataCommendList} from '@/utils/editAxios'
  import Toast from '@/edit-components/Toast'
  export default {
    data () {
      return {
        relPosition: 'TITLE',
        goodsClassifyCode: '',
        relTitle: '',
        relSubtitle: '',
        relPositionName: '',
        publicityPicture: '',  //宣传图片
        promotionType: 1, // 活动类型 1：商品 2：活动
        activePicture: '',  //基本图片
        goodsCode: '', //商品编码
        showTime: '',
        rid: ''
      }
    },
    components: {
      imgUpload,
      Toast,
      /*SearchEncode*/
    },
    props: {
    	currentGoodsCode:{
    		type: String,
    		default: ""
    	},
      buttonType: {
        type: String,
        default: 'add'
      },
      classifyList: {
        default: () => [],
        type: Array
      },
      currentClassCode: {
        type: String,
        default: ''
      },
      TITLE: {
        type: Object,
        default: null
      },
      IMAGE: {
        type: Object,
        default: null
      },
      GOODS: {
        type: Array,
        default: []
      }
    },

    methods: {
      searchproductmodel() {
      	this.$emit("searchproductmodel")
      },
      changeGoodsCode (data) {
      	this.goodsCode = data
      },
      closeEdit () {
        this.$emit('closeModel')
      },
      initUpData (item){
        this.relPosition = item.relPosition
        this.relPositionName = item.relPositionName
        this.goodsClassifyCode = item.relType  //"资源类型/选择餐点时段/选择特色商品标签",
        this.relTitle = item.relTitle
        this.relSubtitle = item.relSubtitle
        this.publicityPicture = item.publicityPicture , //宣传图片
          this.promotionType = item.promotionType // 活动类型 1：商品 2：活动
        this.activePicture = item.activePicture  //基本图片
        this.goodsCode = item.goodsCode//商品编码
        this.rid = item.rid
      },
      initConfig () {
        this.relTitle = ""
        this.relSubtitle = ""
        this.publicityPicture = ""  //宣传图片
        this.promotionType = 1 // 活动类型 1：商品 2：活动
        this.activePicture = ""  //基本图片
        this.goodsCode = "" //商品编码
      },
      //报错提示框
      errorToast(msg, duration = 1000) {
        this.$refs.toast.toast(msg, duration);
      },
      bannerDeleteCallback() {
        console.log("删除对应的图片");
        this.bannerUrl = "";
      },
      async uploadData () {
        var res
        var config = this.config
        if (this.buttonType == 'add') {
          res = await addCommendList(config)
          res = res.data
        } else if (this.buttonType == 'updata') {
          config.rid = this.rid
          res = await updataCommendList(config)
          res = res.data
        }

        if (res.returnCode == 0) {
          this.$refs.Toast.toast('上传失败', 1000)
          return
        }
        this.$refs.Toast.toast('上传成功', 1000)
        this.$emit('closeModel')
        this.$emit('updata')
      },

      //点击立即发送
      async addCommend () {
        var config = this.config
        var res
        var returnCode
        if (this.relPosition == 'TITLE') {//标题位上传

          if (this.TITLE && this.buttonType == 'add') {
            this.$refs.Toast.toast('标题位已存在，添加失败', 1000)
            return
          }
          if (!config) {
            this.$refs.Toast.toast('主题和标题必填', 1000)
            return
          }
        } else if (this.relPosition == 'IMAGE') {//图片位上传

          if (this.IMAGE && this.buttonType == 'add') {
            this.$refs.Toast.toast('图片位已存在，添加失败', 1000)
            return
          }

          if (!config) {
            this.$refs.Toast.toast('请将信息填写完整', 1000)
            return
          }
          //上传图片到文件服务器
          returnCode = await this.uploadImage()
          if (!returnCode) {
            //上传失败返回
            return
          }

        } else if (this.relPosition == 'GOODS') { //商品位上传

          if (!config) {
            this.$refs.Toast.toast('商品编码和标题必填', 1000)
            return
          }
          //上传图片到服务器
          returnCode = await this.uploadImage()
          if (!returnCode) {
            //长传失败返回
            return
          }

        }

        this.uploadData()

      },

      //上传图片
      async uploadImage() {
        //上传图片
        //这个回调是上传主图的回调
        var bannerRes = await this.$refs.bannerImg.upload();
        var activityRes
        if (bannerRes.status === 0) {
          this.errorToast("banner图片上传失败");
          return 0;
        }
        if (bannerRes.status === 1) {
          this.publicityPicture = bannerRes.data[0];
          console.log(this.publicityPicture);
        }
        if (this.promotionType == 2) {
          activityRes = await this.$refs.activityImg.upload();
          if (activityRes.status === 0) {
            this.errorToast("推广活动图片上传失败");
            return 0;
          }
          if (activityRes.status === 1) {
            this.activePicture = activityRes.data[0];
          }
        }
        return 1
      },
    },
    watch: {
    
      relPosition () {
        if (this.buttonType == 'add') {
          this.initConfig()
        }
      },
      currentClassCode (data) {
        this.goodsClassifyCode = data
      },

    },
    computed: {
      config() {
        var api = API()
        var storeCode = api.shopCode
        var relGroup = this.goodsClassifyCode
        var relPosition = this.relPosition
        var relType = this.goodsClassifyCode
        var relTitle = this.relTitle
        var relSubtitle = this.relSubtitle
        var publicityPicture = this.publicityPicture
        var promotionType = this.promotionType
        var activePicture = this.activePicture
        var goodsCode = this.goodsCode
        var showTime = this.showTime
        var config = {
          storeCode,  // "门店CODE",
          relGroup,   // A,
          relPosition,// 资源位,
          relType,    // 资源类型/选择餐点时段/选择特色商品标签,
          relTitle: '',   // 标题,
          relSubtitle: '',// 副标题,
          publicityPicture: '', // 宣传图片,
          promotionType: '', // 推广类型,
          activePicture: '', // 活动个图片,
          goodsCode: '', // 商品编码,
          showTime: showTime, // 展示时间
        }
        //资源位类型是 标题
        if (this.relPosition == 'TITLE') {
          config.relTitle = relTitle
          config.relSubtitle = relSubtitle

          if (relTitle && relSubtitle && relGroup) {
            //验证表单通过 返回config
            return config
          }

        }
        //资源位类型是 图片
        else if (this.relPosition == 'IMAGE') {
          config.relTitle = relTitle
          config.publicityPicture = publicityPicture
          config.promotionType = promotionType
          config.activePicture = activePicture
          config.goodsCode = goodsCode
          //当缺少表单数据时
          if (relTitle && promotionType && (goodsCode || promotionType == 2)) {
            return config
          }
        }
        //资源位类型是 商品
        else if (this.relPosition == 'GOODS') {
          config.relTitle = relTitle
          config.publicityPicture = publicityPicture
          config.promotionType = promotionType
          config.goodsCode = goodsCode
          if (relTitle && promotionType && goodsCode) {
            return config
          }
        }

        return false

      },
      activityDeleteCallback() {
        this.activePicture = "";
      },
      getDataItem(){
        return {}
      }
    }

  }
</script>

<style scoped>
  .modal-body {
    text-align: left;
  }

  label {
    display: inline-block;
  }

  .form-inline .radio {
    display: inline-block;
  }

  select {
    padding: 0 5px;
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 2px;
    height: 28px;
    text-align: start;
  }

  .form-control {
    margin: 1px 0;
    background-color: #fff;
    color: #000;
    border-color: #ddd;
    border: 1px solid #ccc;
  }

  .form-control {
    height: 28px;
    padding: 3px 5px;
    border-radius: 2px;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .modal-footer {
    left: 0;
    transform: translatey(100%);
    width: 100%;
    position: absolute;
    bottom: 2px;
    margin-top: 0;
    padding: 14px 15px 15px;
    border-top: 1px solid #eee;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: -1;
  }

  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
  }

  .btn {
    margin: 1px 0;
    background-color: #fff;
  }

  .btn:active {
    /*box-shadow:  ;*/
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.3);

  }

  .btn-primary {
    background-color: #3876af;
    border-color: #306ca4;
    color: #fff;
  }

  .dropzone {
    position: relative;
    border: 2px dashed #f2f2f2;
    background-color: #f9f9f9;
    padding: 10px;
    overflow: hidden;
    display: inline-block;
  }

  .dropzone .dz-message {
    border: 2px dashed #f2f2f2;
    margin: 10px;
    width: 120px;
    height: 120px;
    position: relative;
    float: left;
  }

  .dropzone .dz-message::before, .dropzone .dz-message::after {
    content: "";
    width: 60px;
    height: 2px;
    background: #d2d2d2;
    position: absolute;
  }

  .dropzone .dz-message::before {
    left: 27px;
    top: 59px;
  }

  .dropzone .dz-message::after {
    left: 27px;
    top: 59px;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }

  .cjy-row {
    vertical-align: middle;
  }

  .form-inline .form-group {
    border: 2px dashed #d4d4d1;
    margin-left: 30px;
    display: inline-block;
  }

  .modal-footer .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0;
  }
</style>
